<template>
	<div>
		<section>
			<div class="title">&nbsp;&nbsp;已绑定手机号 <span>{{worked_mobile}}</span></div>
			<div class="m_top"><label>输入验证码</label><input v-model="yzm" v-on:input="check" type="number" class="input yzm_input"
				 name="yzm" placeholder="请输入验证码"><span class="sendyzm" v-if="!isGetYzm" @click='sendyzm()'>发送验证码</span>
				<span class="sendyzm" v-else style="color:#999;">
					重新发送({{time}})
				</span>
			</div>
			<div class="m_top"><label>输入密码</label><input v-model="password" v-on:input="check" type="password" class="input"
				 placeholder="请设置密码"></div>
			<div class="m_top"><label>确认密码</label><input v-model="repeat_password" v-on:input="check" type="password" class="input"
				 placeholder="请再次输入密码"></div>
			<div class="send" :class="{'active': isActive}" @click='changePwd()'>提交</div>
		</section>
		<div class="loading mask" :class="{'show_loading':isAjax}">
			<div class="load_container">
				<p>正在发送中...</p>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		mapState,
	} from 'vuex'
	export default {
		data() {
			return {
				yzm: '',
				password: '',
				repeat_password: '',
				isGetYzm: false,
				time: 0,
				isAjax: false,
				isActive: false

			}
		},
		computed: {
			...mapState(['userInfo', 'worked_mobile', 'mobile'])
		},
		methods: {
			check() {
				var l = this.password.length;
				var yzm_l = this.yzm.length;
				if (yzm_l == 6 && (l >= 6 && l <= 20) && (this.password == this.repeat_password)) {
					this.isActive = true;
				} else {
					this.isActive = false;
				}
			},
			sendyzm() {
				if (this.isGetYzm) return
				this.getyzm()
			},
			getyzm() {
				this.time = 60;
				var that = this;
				var d = "sessionid=" + userInfo.sessionid + "&userid=" + userInfo.userid + "&mobile=" + this.mobile +
					"&action=editpwd"

				this.axios.post(userInfo.hosturl + '/IOSApi/ajax_sendcode', d, {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}
				}).then(function (data) {
					var data = data.data;
					if (data.result == 0) {
						toast('发送成功');
						that.isGetYzm = true;
						var timer = setInterval(function () {
							if (that.time-- <= 0) {
								that.isGetYzm = false;
								that.time = 60;
								clearInterval(timer)
							}
						}, 1000)
					} else if (data.result == 1037) {
						loginout(1)
					} else {
						toast(data.error)
					}
				})
			},
			checkForm() {
				var l = this.password.length;

				/* 检验验证码*/
				if (this.yzm.length != 6) {
					toast("验证码不对！");
					return false
				}
				if (!this.yzm || !this.password || !this.repeat_password) {
					toast('请填写完整信息!')
					return false
				}
				if (l < 6 || l > 20) {
					toast('密码长度为6-20位!');
					return false
				}
				/* 比较两次密码是否相同 */
				if (this.password !== this.repeat_password) {
					toast('两次输入的密码不一样')
					return false
				}
				return true
			},
			changePwd() {
				// 防止请求还没请求完就连续点击
				if (this.isAjax) {
					return
				}
				if (!this.checkForm()) {
					return
				}
				var that = this;
				var d = "sessionid=" + userInfo.sessionid + "&userid=" + userInfo.userid + "&yzm=" + this.yzm +
					"&newpassword=" + this.password;
				this.axios.interceptors.request.use(function (config) {
					that.isAjax = true;
					return config;
				}, function (error) {
					return Promise.reject(error)
				});
				this.axios.interceptors.response.use(function (res) {
					that.isAjax = false;
					that.isActive = false;
					return res;
				}, function (error) {
					that.isAjax = false;
					return Promise.reject(error);
				});
				this.axios.post(userInfo.hosturl + '/IOSApi/ajax_editpwd', d, {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}
				}).then(function (data) {
					var data = data.data;
					if (data.result == 0) {
						//修改成功后计时清0，也清除了计时器
						that.time = 0;
						reditpassword(userInfo.userid, that.password);
						that.yzm = '';
						that.password = '';
						that.repeat_password = '';
						that.$router.go(-1);
					} else if (data.result == 1037) {
						loginout(1);
					} else {
						toast(data.error);
					}
				})
			}
		},
		activated() {},
		mounted() {}
	}

</script>
<style lang='scss' scoped>

</style>
